import React, { Component } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper/core';
import { getTuijiangedan, getTuijianmv, getTuijiansong } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import { imgArr } from './swiperImgData';
import 'swiper/swiper.min.css';
import '../../style/swiperAlter.css';
import '../../style/all.css';
import './Faxianmusic.css';

SwiperCore.use([Autoplay]);

export default class Faxianmusic extends Component {
	state = {
		tuijiangedanList: [],
		tuijianmvList: [],
		tuijiansongList: []
	}
	async componentDidMount () {
		const tuijiangedan = await getTuijiangedan();
		const tuijianmv = await getTuijianmv();
		const tuijiansong = await getTuijiansong();
		this.setState({
			tuijiangedanList: tuijiangedan.data.slice(0, 5),
			tuijianmvList: tuijianmv.data.slice(0, 4),
			tuijiansongList: tuijiansong.data.slice(0, 10)
		})
	}
	render () {
		let { tuijiangedanList, tuijianmvList, tuijiansongList } = this.state;
		return (
			<div className='music main'>
				<div className='faxianbanner'>
					<Swiper
						spaceBetween={-40}
						slidesPerView={2}
						autoplay={{ delay: 1500, disableOnInteraction: false }}
						centeredSlides
						loop
					>
						{imgArr.map((item, index) => (
							<SwiperSlide key={index} className='swiper-slide'>
								<a href="#" rel='noreferrer' className='link'>
									<img width='100%' height='100%' src={item} alt="" />
								</a>
							</SwiperSlide>
						))}
					</Swiper>
				</div>
				<div className='first'>
					<div className='first_title'>
						<h2>推荐歌单</h2>
						<span className='red' onClick={() => { this.props.history.push('/index/tuijiangedan'); }}>查看更多</span>
					</div>
					<div className='first_box'>
						<ul className='f_music_box'>
							{tuijiangedanList.map((item) => (
								<li className='perse20' key={item.gedanid} onClick={() => { this.props.history.push(`/index/gedandetail?id=${item.gedanid}`); }}>
									<div className='img tophover'>
										<img width='100%' height='100%' src={"http://localhost:3001/" + item.gedan_pic_url} alt="" />
										<div className='gd_mv_hover'></div>
									</div>
									<p>{item.gedan_title}</p>
								</li>
							))}
						</ul>
					</div>
				</div>
				<div className='second'>
					<div className='second_title'>
						<h2>推荐MV</h2>
						<span className='red' onClick={() => { this.props.history.push('/index/zuixinmv'); }}>查看更多</span>
					</div>
					<div className='second_box'>
						<ul className='s_mv_box'>
							{tuijianmvList.map((item) => (
								<li className='perse25' key={item.mvid} onClick={() => { this.props.history.push(`/index/mvdetail?id=${item.mvid}`); }}>
									<div className='img tophover'>
										<img width='100%' height='100%' src={"http://localhost:3001/" + item.mv_pic_url} alt="" />
										<div className='gd_mv_hover'></div>
									</div>
									<p>{item.mv_name}<br /><span>{item.singer_name}</span></p>
								</li>
							))}
						</ul>
					</div>
				</div>
				<div className='third'>
					<div className='third_title'>
						<h2>推荐歌曲</h2>
						<span className='red' onClick={() => { this.props.history.push('/index/zuixinsong'); }}>查看更多</span>
					</div>
					<div className='third_box'>
						<ul className='t_song_box'>
							{tuijiansongList.map((item) =>(
								<li key={item.musicid} onClick={() => { bus.emit('syplay', { id: item.musicid }) }}>
									<div className='img'>
										<img width='100%' height='100%' src={"http://localhost:3001/" + item.music_pic_url} alt="" />
										<div className='song_hover'></div>
									</div>
									<p>{item.music_name} <br />
										<span>{item.singer_name} &nbsp;</span>
									</p>
								</li>
							))}
						</ul>
					</div>
				</div>
			</div>
		)
	}
}
